<template>
    <div>
      <TodoHeader @submitTaskName="addTask"/>
      <TodoMain :list="showList"/>
      <TodoFooter :sNumber="sNumber" @toClear="clearTask" @getCode="toGetCode"/>
    </div>
  </template>
  
  <script>
  import TodoFooter from './components/TodoFooter.vue'
  import TodoHeader from './components/TodoHeader.vue'
  import TodoMain from './components/TodoMain.vue'
  export default {
    components:{
      TodoHeader,
      TodoFooter,
      TodoMain
    },
    data(){
      return {
        taskList: [
          {id: '111', name: '学习js', isChecked: false},
          {id: '22', name: '学习Vue', isChecked: false},
          {id: '33', name: '学习快乐', isChecked: false}
        ],
        code: 'all'
      }
    },
    computed:{
      sNumber(){
        return this.taskList.filter(obj => !obj.isChecked).length
      },
      showList(){
        if(this.code === 'all'){
          return this.taskList
        } else if(this.code === 'yes'){
          return this.taskList.filter(obj => obj.isChecked)
        } else {
          return this.taskList.filter(obj => !obj.isChecked)
        }
  
      }
    },
    methods: {
      toGetCode(code){
        this.code = code
      },
      clearTask(){
        this.taskList = this.taskList.filter(obj => !obj.isChecked)
      },
      addTask(taskName){
        console.log(taskName);
        let taskObj = {
          id: + new Date(), // 时间戳
          name: taskName,
          isChecked: false
        }
        this.taskList.push(taskObj)
      }
    }
  }
  </script>
  
  <style>
  
  </style>